
<template>
  <el-dialog :title="title" width="450px" :visible.sync="isShowDialog" :close-on-click-modal="false" :append-to-body="true">
    <el-divider>结果显示</el-divider>
    <div class="tagcolor">
      <div class="tagcolor-value" :style="{color:result.color_text? result.color_text:'#333',background:result.color_bg ? result.color_bg:'#FFF','border-color':result.color_border ? result.color_border:'#333'}">通过下方选择颜色</div>
    </div>
    <el-divider>自定义样式</el-divider>
    <div class="tagcolor-cust">
      <div class="tagcolor-cust-item">
        <div class="tagcolor-cust-title">文字颜色</div>
        <div class="tagcolor-cust-picker">
          <el-color-picker v-model="result.color_text" @change="e=>changeColor('text',e)"></el-color-picker>
        </div>
      </div>
      <div class="tagcolor-cust-item">
        <div class="tagcolor-cust-title">边宽颜色</div>
        <div class="tagcolor-cust-picker">
          <el-color-picker v-model="result.color_border" @change="e=>changeColor('border',e)"></el-color-picker>
        </div>
      </div>
      <div class="tagcolor-cust-item">
        <div class="tagcolor-cust-title">背景颜色</div>
        <div class="tagcolor-cust-picker">
          <el-color-picker v-model="result.color_bg" @change="e=>changeColor('bg',e)"></el-color-picker>
        </div>
      </div>
    </div>
    <el-divider>可选预设</el-divider>
    <div class="tagcolor-yushe">
      <div class="tagcolor-item" @click="tapTag(item)" v-for="item in tagList" :key="item.color_text + item.color_bg + item.color_border" :style="{color:item.color_text,'border-color':item.color_border,'background-color':item.color_bg}">{{item.label}}</div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>
<style scoped>
.tagcolor{display: flex;align-items: center;justify-content: center;}
.tagcolor-item{margin:0 15px 10px 0;border-radius: 4px;padding:10px 15px;border:1px solid #333;cursor: pointer;}
.tagcolor-value{border:1px solid #ccc;display: flex;justify-content: center;align-items: center;border-radius: 4px;margin-bottom:10px;height:32px;padding:0 20px;}
.tagcolor-yushe{display: flex;justify-content: center;flex-wrap: wrap;}
.tagcolor-cust{display: flex;align-items: center;justify-content: space-around;}
.tagcolor-cust-title{width:100px;display: flex;align-items: center;justify-content: center;height:40px;font-weight: bold;}
.tagcolor-cust-picker{width:100px;display: flex;align-items: center;justify-content: center;}
</style>
<script>
  export default {
    name:'tagColorPicker',
    props:{
      formTypeProp:{
        type:String,
        default(){
          return 'add';
        }
      },
      field:{
        type:String,
        default(){
          return '';
        }
      },
      title:{
        type:String,
        default(){
          return '设置颜色';
        }
      }
    },
    created(){
       
    },
    data() {
      return {
        returnField:'',
        isShowDialog:false,
        result:{},
        tagList:[
          {label:'淡蓝',color_text:'#409eff',color_bg:'#fff',color_border:'#b3d8ff'},
          {label:'淡绿',color_text:'#67c23a',color_bg:'#fff',color_border:'#c2e7b0'},
          {label:'淡灰',color_text:'#909399',color_bg:'#fff',color_border:'#d3d4d6'},
          {label:'淡红',color_text:'#f56c6c',color_bg:'#fff',color_border:'#fbc4c4'},
          {label:'淡黄',color_text:'#e6a23c',color_bg:'#fff',color_border:'#f5dab1'},
          {label:'浅蓝',color_text:'#409eff',color_bg:'#ecf5ff',color_border:'#d9ecff'},
          {label:'浅绿',color_text:'#67c23a',color_bg:'#f0f9eb',color_border:'#e1f3d8'},
          {label:'浅灰',color_text:'#909399',color_bg:'#f4f4f5',color_border:'#e9e9eb'},
          {label:'浅红',color_text:'#e6a23c',color_bg:'#fdf6ec',color_border:'#faecd8'},
          {label:'浅黄',color_text:'#f56c6c',color_bg:'#fef0f0',color_border:'#fde2e2'},
          {label:'深蓝',color_text:'#fff',color_bg:'#409eff',color_border:'#409eff'},
          {label:'深绿',color_text:'#fff',color_bg:'#67c23a',color_border:'#67c23a'},
          {label:'深灰',color_text:'#fff',color_bg:'#909399',color_border:'#909399'},
          {label:'深红',color_text:'#fff',color_bg:'#f56c6c',color_border:'#f56c6c'},
          {label:'深黄',color_text:'#fff',color_bg:'#e6a23c',color_border:'#e6a23c'},
        ]
      }
    },
    methods:{
      submit(){
        this.$emit('pickTagColor',this.returnField,this.result);
        this.close();
      },
      open(returnField,value = {}){
        this.returnField = returnField;
        this.isShowDialog = true;
        let result = {};
        if (value.color_text) result.color_text = value.color_text;
        if (value.bg_text) result.bg_text = value.bg_text;
        if (value.border_text) result.border_text = value.border_text;
        
      },
      close(){
        this.isShowDialog = false;
      },
      changeColor(field,val){
        this.$set(this.result,'color_'+field,val);
      },
      tapTag(item){
        let result = {};
        result.color_text = item.color_text;
        result.color_bg = item.color_bg;
        result.color_border = item.color_border;
        this.result = result;
      }
    }
  };
</script>
